<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="大学生就业实训,品质就业,职业规划,IT行业人才基地"/>
    <title>蜗牛书城(woniuxy.com)-正品低价、品质保障、配送及时、轻松购物！</title>

    <!-- 引入Bootstrap核心样式文件 -->
    <link href="/bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入jQuery核心js文件 -->
    <script src="/javascript/jQuery-1.12.4.js"></script>
    <!-- 引入BootStrap核心js文件 -->
    <script src="/bootstrap-3.4.1/js/bootstrap.min.js"></script>


    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link href="/css/common.css" rel="stylesheet"/>
    <link href="/css/top.css" rel="stylesheet"/>
    <link href="/css/foot.css" rel="stylesheet"/>

    <link href="/css/book-detail.css" rel="stylesheet"/>
    <script src="/javascript/book-detail.js"></script>

    <!-- 引入axios的包 -->
    <script src="/javascript/axios-min.js"></script>
    <!-- 引入vue的包 -->
    <script src="/javascript/vue-2.7.14.js"></script>
</head>

<body>

<!-- ==============  引入顶部的碎片  ===============  -->
<div th:replace="~{commons::top}"></div>

<!-- =========================== 书本详情页面 =============================== -->

<div class="container no-padding book-detail-bg">
</div>

<div class="index mt50">
    <div class="container no-padding">
        <a href="index.html">首 页</a>
    </div>
</div>


<div id="app">
    <!-- 书本详情 -->
    <div class="container no-padding">
        <div class="book-img fl">
            <img :src="'http://localhost:90'+bookImg"/>
        </div>

        <div class="book-info fl">
            <input type="text" :value="bookId" hidden />
            <p id="bookName" class="book-name">{{bookName}}</p>
            <p class="book-price mt50">价格 :<font color="red">￥</font><span id="bookPrice">{{bookPrice}}</span></p>
            <p id="bookCollect" class="book-collect mt50">收藏 : {{bookCollectionCount}}</p>

            <div class="book-count mt50 form-inline">
                购买数量 :
                <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-minus"></span>
                    <input type="text" class="form-control" maxlength="3" v-model="buyCount">
                    <span class="input-group-addon glyphicon glyphicon-plus"></span>
                </div>
                库存量 : <span>{{cart.bookStoreCount * cart.bookPrice}}</span>
            </div>
            <div class="btn-box mt50">
                <a @click="addToCart()">添加购物车</a>
                <a>立即购买</a>
            </div>
        </div>
    </div>
</div>
<script>
    let id = [[${id}]];

    let vue = new Vue({
        el: "#app",
        data() {
            return {
                bookId: "",
                bookImg: "",
                bookName: "",
                bookPrice: "",
                bookCollectionCount: "",
                bookStoreCount: "",
                buyCount: 1
            }
        },
        methods: {
            addToCart(){
                let params = new URLSearchParams();
                params.append("bookId",vue.bookId);
                params.append("buyCount",vue.buyCount);

                axios.post('/cart/add/', params)
                    .then(function (response) {

                        console.log(response.data.data);

                    }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        created: function () {
            axios.get('/book/find/'+id)
                .then(function (response) {
                    console.log(response.data.data);
                    vue.bookId = response.data.data.id;
                    vue.bookImg = response.data.data.bookImg;
                    vue.bookName = response.data.data.bookName;
                    vue.bookPrice = response.data.data.bookPrice;
                    vue.bookCollectionCount = response.data.data.bookCollectionCount;
                    vue.bookStoreCount = response.data.data.bookStoreCount;

                }).catch(function (error) {
                console.log(error);
            });
        }
    })
</script>

<!-- ==============  引入顶部的碎片  ===============  -->
<div th:replace="~{commons::footer}"></div>

</body>
</html>
